<template>
  <section>


    <h2>正在进行 <span id="todocount">{{getNum}}</span></h2>
    <ol id="todolist" class="demo-box">
      <li v-for="item in list" :key="item.id"><input type="checkbox" :checked="item.isDone" @change="Doing(item.id)">
        <p>{{item.name}}</p>
        <a href="javascript:;" @click.prevent="del(item.id)"></a>
      </li>
    </ol>


    <h2>已经完成 <span id="donecount">{{getSum}}</span></h2>
    <ul id="donelist">
       <li v-for="item in listw" :key="item.id"><input type="checkbox" :checked="item.isDone" @change="Done(item.id)">
        <p>{{item.name}}</p>
        <a href="javascript:;" @click.prevent="delw(item.id)"></a>
      </li>
    </ul>


  </section>
</template>

<script>
export default {
 props:{
     list:{
         type:Array,
         required:true
     },
     listw:{
         type:Array,
         required:false
     }
 },
 methods:{
     Doing(id){
        this.$emit('Doing',id)
     },
     Done(id){
         this.$emit('Done',id)
     },
     delw(id){
         this.$emit('delw',id)
     },
     del(id){
         this.$emit('del',id)
     }
 },
 computed:{
     getNum(){
         return this.list.length
     },
     getSum(){
         return this.listw.length
     }
 }
}
</script>

<style>

</style>